import {Steps, TabItem, Tabs} from "@astrojs/starlight/components";

import FlattenedSteps from "../../components/FlattenedSteps.astro";
import ZulipTip from "../../components/ZulipTip.astro";
import GoToInbox from "../include/_GoToInbox.mdx";

import ArrowDownIcon from "~icons/zulip-icon/arrow-down";
import InboxIcon from "~icons/zulip-icon/inbox";

<Tabs>
  <TabItem label="Desktop/Web">
    <FlattenedSteps>
      <GoToInbox />

      1. Click on a conversation you're interested in to view it. You can return to
         your **inbox** when done (e.g., by using the **back** button in your browser
         or desktop app) to select the next conversation.
    </FlattenedSteps>
  </TabItem>

  <TabItem label="Mobile">
    <Steps>
      1. Tap the **Inbox** (<InboxIcon />)
         tab in the bottom left corner of the app.
      1. Tap on a conversation you're interested in to view it. You can return to
         your **inbox**  when done (e.g., by using the **back** button) to select
         the next conversation.
    </Steps>
  </TabItem>
</Tabs>

<ZulipTip>
  You can collapse or expand the list of topics in a channel by clicking the
  **collapse**
  (<ArrowDownIcon />)
  or **expand**
  (<ArrowDownIcon />)
  icon to the left of a channel name.
</ZulipTip>
